<!-- updated 2022/1/31 -->
<template>
  <div class="zui-switch">
    <div class="switch" :class="{ negative: !value }" @click="value = !value">
      <em></em>
      <span class="yes">{{ yesText }}</span>
      <span class="no">{{ noText }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: Boolean,
  yesText: {
    type: String,
    default: '是'
  },
  noText: {
    type: String,
    default: '否'
  }
})

const value = ref(!!props.modelValue)
watch(
  () => props.modelValue,
  (val) => {
    value.value = val
  }
)
watch(value, (val) => {
  emit('update:modelValue', val)
})
</script>

<style scoped lang="scss">
.zui-switch {
  cursor: pointer;
  display: inline-block;
  .switch {
    width: 100px;
    height: 32px;
    line-height: 32px;
    box-shadow: var(--zui-box-shadow);
    position: relative;
    color: var(--zui-color-text-primary);
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 3px;
    > span {
      display: inline-block;
      width: 50%;
      position: relative;
      text-align: center;
    }
    > h1 {
      text-align: right;
    }
    > em {
      position: absolute;
      display: inline-block;
      width: 44px;
      height: 26px;
      background: var(--zui-color-primary);
      left: 5px;
      top: 3px;
      border-radius: 3px;
      transition: left 0.2s ease-in-out;
    }
    .yes {
      color: #ffffff;
      transition: color 0.2s ease-in-out;
    }
    .no {
      color: var(--zui-color-text-primary);
      transition: color 0.2s ease-in-out;
    }
  }

  .negative {
    > em {
      left: 51px;
    }
    .yes {
      color: var(--zui-color-text-primary);
    }
    .no {
      color: #ffffff !important;
    }
  }
}
</style>
